<template>
  <div class="main_login">
    <span class="log">转日莲，更无柳絮因风起，唯有葵花向日倾</span>
    <div class="login_container">
      <div class="register_logo">
        <img src="../../assets/image/logo@2x.png" alt="">
      </div>
      <div class="login_box">
        <el-form ref="form" :model="userData" :rules="rules">
          <el-form-item prop="username">
            <el-input class="username"
                      placeholder="昵称"
                      prefix-icon="el-icon-chat-square"
                      v-model="userData.nickname">
            </el-input>
          </el-form-item>
          <el-form-item prop="usernumber">
            <el-input class="usernumber"
                      placeholder="用户账号"
                      prefix-icon="el-icon-user"
                      v-model="userData.usernumber">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input class="password"
                      placeholder="密码"
                      prefix-icon="el-icon-film"
                      type="password"
                      v-model="userData.password">
            </el-input>
          </el-form-item>
          <el-form-item prop="ensurePassword">
            <el-input class="password"
                      placeholder="密码确认"
                      prefix-icon="el-icon-film"
                      type="password"
                      v-model="userData.ensurePassword">
            </el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input class="email"
                      placeholder="QQ 邮箱，用于找回"
                      prefix-icon="el-icon-film"
                      type="password"
                      v-model="userData.email">
            </el-input>
          </el-form-item>
          <el-form-item prop="verification_code">
            <div class="combine">
              <el-input v-model="userData.verification_code" placeholder="验证码" class="check"
                        prefix-icon="el-icon-document-checked"></el-input>
              <img @click="change_verification_code" :src="imgSrc" class="register_code"
                   alt="">
            </div>
          </el-form-item>
          <el-button @click="submitForm('form')" type="primary" class="register">注册</el-button>
        </el-form>
        <div class="login_tail_container">
          <div class="login_tail">
            <span class="forget"></span>
            <span @click="go_back" class="re_back">返 回</span><span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RegisterBox",
  data: function () {
    return {
      userData: {
       nickname: '',
        usernumber: '',
        password: '',
        ensurePassword: '',
        verification_code: '',
        email: '',
      },
      rules: {
        nickname: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 8, max: 13, message: '长度在 8 到 13 个字符', trigger: 'blur'}
        ],
        usernumber: [
          {required: true, message: '请输入登录账号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        ensurePassword: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        verification_code: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ],
      },
      nickname: '',
      usernumber: '',
      password: '',
      verification_code: '',
      man: '',
      imgSrc:""
    }
  },
  created() {
    let that = this
    this.$axios.get("http://localhost:80/webBasic/getCode", {
      responseType: 'blob',
    }).then(res => {
      that.userData.img_code = res.headers.imgcode
      that.imgSrc = window.URL.createObjectURL(res.data)
    })
  },
  methods: {
    change_verification_code() {
      let that=this
      this.$axios.get("http://localhost:80/webBasic/getCode", {
        responseType: 'blob',
      }).then(res => {
        that.userData.img_code = res.headers.imgcode
        that.imgSrc = window.URL.createObjectURL(res.data)
      })
    },
    go_back() {
      this.$router.back()
    },
    submitForm(formName) {
      let that=this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("http://localhost:80/webBasic/register",that.userData).then(res=>{
              if(res.data.code==200){
                this.$router.push("/home")
                this.$store.commit("saveUsernumber", that.userData.usernumber)
                this.$store.commit("saveNickname", that.userData.nickname)
              }else{
                this.$message({
                  showClose: true,
                  message: '注册失败',
                  type: 'error'
                });
              }
          })
        } else {
          this.$message({
            showClose: true,
            message: '请正确输入所有信息哦',
            type: 'error'
          });
          return false;
        }
      });
    },
  },
}
</script>

<style scoped>
.register_logo{
  margin-left: -30px;
}


.log {
  position: absolute;
  left: 50%;
  top: 1%;
  transform: translate(-50%);
  color: #606266;
  text-align: center;
  font-size: 12px;
}


.main_login {
  /*border-radius: 50%;*/
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}

.login_container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f0f2f5;

}

.login_logo img {
  width: 240px;
  margin-bottom: 20px;
}


.login_box {
  box-shadow: 15px 15px 90px gray;
  height: 500px;
  width: 400px;
  background-color: #ffffff;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 5%;
}

.username {
  margin-top: 20px;
}

.email {
}

.usernumber {
  box-sizing: border-box;
}

.password {
  background-color: #f5f7fa;
}

.combine {
  display: flex;
  box-sizing: border-box;
}

.combine img {
  height: 38px;
  background-color: white;
}

.check {
  background-color: #f5f7fa;
  flex: 8;
}

.password {
  background-color: #f5f7fa;
}

.register_code {
  background-color: #f5f7fa;
  flex: 4;
}

.register {
  width: 100%;
}

.login_tail {
  display: flex;
}

.forget {
  font-size: 14px;
  color: #409EFF;
  margin-bottom: 15px;
  font-weight: bold;
  flex: 11;
  transition: font-size 1s;
}

.re_back {
  font-size: 14px;
  color: #409EFF;
  margin-bottom: 15px;
  font-weight: bold;
  flex: 2;
  transition: font-size 1s;
  margin-top: 20px;
}

.forget:hover, .re_back:hover {
  font-size: 17px;
  cursor: default;
}

.login_tail_container {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
</style>
